<template>
  <lay-card style="margin: 10px">
    <lay-form
      style="margin-top: 20px"
      :model="queryParams"
      size="xs">
      <lay-row>
        <lay-col :md="6">
          <lay-form-item label="部门:">
            <TreeSelect
              class="w-[100%]"
              v-model="searchAccount"
              v-model:hasChildValue="queryParams.hasChildValue"
              v-model:hasStopValue="queryParams.hasStopValue"
              hasChild
              :hasStop="false" />
          </lay-form-item>
        </lay-col>
        <lay-col :md="6">
          <lay-form-item label="日期区间:">
            <a-range-picker
              day-start-of-week="1"
              v-model="queryParams.time"
              @change="handleWeekRange" />
          </lay-form-item>
        </lay-col>
        <lay-col :md="6">
          <lay-form-item label="工号/姓名:">
            <a-input v-model="queryParams.name" />
          </lay-form-item>
        </lay-col>
        <lay-col :md="6">
          <lay-form-item label-width="0">
            <lay-button
              type="primary"
              class="ml-2"
              @click="toSearch"
              >查询</lay-button
            >
            <lay-button @click="toReset">重置</lay-button>
          </lay-form-item>
        </lay-col>
      </lay-row>
    </lay-form>

    <a-layout>
      <a-layout-sider :resize-directions="['right']">
        <div>
          <lay-table
            :columns="columns"
            :default-toolbar="defaultToolbar"
            :loading="loading"
            :data-source="dataSource">
            <template #name="{ data }">
              <div>
                <div>{{ data.name }}</div>
                <div class="text-[12px] text-[#aaa]">22工作 9休息</div>
              </div>
            </template>
            <template #dayTime="{ data }">
              {{ data.age }}
            </template>
          </lay-table>
        </div>
      </a-layout-sider>
      <a-layout-content>
        <lay-table
          :columns="columns2"
          :loading="loading"
          :data-source="dataSource"
          :default-toolbar="defaultToolbar2">
          <template #toolbar>
            <div class="text-right">
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >添加</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >考勤卡</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>

              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >操作</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >日历</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >复制上一区间排班</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >工具</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >导入</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >导出</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >操作日志</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-dropdown
                updateAtScroll
                size="xs">
                <lay-button
                  size="xs"
                  suffix-icon="layui-icon-triangle-d"
                  >视图</lay-button
                >
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="handleOpenSignLogs"
                      >考勤卡</lay-dropdown-menu-item
                    >
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
              <lay-button
                size="xs"
                type="primary"
                >保存</lay-button
              >
            </div>
          </template>
          <template #defaultValue="{ data }">
            <lay-tooltip trigger="hover">
              <div class="flex items-center h-[40px]">
                {{ data.defaultValue }}
                <img
                  class="w-[14px] h-[14px] ml-2"
                  src="@/assets/images/rabies.svg" />
              </div>
              <template #content>
                <div>
                  <div class="text-[16px] font-bold">班次详情</div>
                  <div class="text-[12px ] flex items-center">
                    {{ data.defaultValue }}
                    <img
                      class="w-[14px] h-[14px] ml-2"
                      src="@/assets/images/rabies.svg" />
                    已发布
                  </div>
                  <div class="text-[12px]">09:00-18:00 8h</div>
                </div>
              </template>
            </lay-tooltip>
          </template>

          <template #rest="{ data }">
            <lay-tooltip trigger="hover">
              <div class="flex items-center">
                {{ data.rest }}

                <img
                  class="w-[14px] h-[14px] ml-2"
                  src="@/assets/images/rabies.svg" />
              </div>
              <template #content>
                <div>
                  <div class="text-[12px ] flex items-center">
                    {{ data.rest }}
                    <img
                      class="w-[14px] h-[14px] ml-2"
                      src="@/assets/images/rabies.svg" />
                    已发布
                  </div>
                  <div class="text-[12px]">0h</div>
                </div>
              </template>
            </lay-tooltip>
          </template>
        </lay-table>
      </a-layout-content>
    </a-layout>
  </lay-card>
</template>
<!-- <VDatePicker
v-model="searchAccount"
:attributes="attributes"
@dayclick="onDayClick" /> -->

<script setup>
import { ref, reactive, toRefs, onMounted, computed } from 'vue';
import dayjs from 'dayjs';

const defaultToolbar = ref(['filter']);
const defaultToolbar2 = ref([]);
const time = ref();
const data = reactive({
  queryParams: {
    time: [
      dayjs().startOf('month').format('YYYY-MM-DD'),
      dayjs().endOf('month').format('YYYY-MM-DD'),
    ],
    startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
    endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
  },
});
const days = ref([]);

const dates = computed(() => days.value.map((day) => day.date));

const attributes = computed(() =>
  dates.value.map((date) => ({
    highlight: true,
    dates: date,
  }))
);
const onDayClick = (day) => {
  const idx = days.value.findIndex((d) => d.id === day.id);
  if (idx >= 0) {
    days.value.splice(idx, 1);
  } else {
    days.value.push({
      id: day.id,
      date: day.date,
    });
  }
};
const { queryParams } = toRefs(data);

const handleWeekRange = (val) => {
  if (!val) {
    return;
  }
  // const end = dayjs(val).add(6, 'day').format('YYYY-MM-DD');
  queryParams.value.startTime = val[0];
  queryParams.value.endTime = val[1];

  console.log(val);
  getDayRangeAll(val[0], val[1]);
};
const getDayRangeAll = (startDate, endDate) => {
  const dates = [];
  const interval = dayjs(endDate).diff(startDate, 'day');

  for (let i = 0; i <= interval; i++) {
    dates.push(dayjs(startDate).add(i, 'day').format('YYYY-MM-DD'));
  }
  columns2.value = dates.map((item) => {
    const isRest = dayjs(item).format('d');
    console.log(isRest);
    return {
      title: dayjs(item).format('MM/DD ddd'),
      width: '120px',
      align: 'center',
      key: ['6', '0'].includes(isRest) ? 'rest' : 'defaultValue',
      customSlot: ['6', '0'].includes(isRest) ? 'rest' : 'defaultValue',
    };
  });
};

const loading = ref(false);

const selectedKeys = ref([]);

const page = reactive({ current: 1, limit: 10, total: 100 });

const columns = ref([
  { title: '姓名', width: '110px', key: 'name', customSlot: 'name' },
  { title: '排班', width: '110px', key: 'name', customSlot: 'dayTime' },
  // { title: '姓名', width: '110px', hide: true, key: 'name', titleSlot: 'name' },
  // { title: '姓名', width: '110px', hide: true, key: 'name', titleSlot: 'name' },
  // { title: '姓名', width: '110px', hide: true, key: 'name', titleSlot: 'name' },
  // { title: '姓名', width: '110px', hide: true, key: 'name', titleSlot: 'name' },
]);
const columns2 = ref([
  { title: '姓名', width: '80px', key: 'name', sort: 'desc' },
  { title: '状态', width: '180px', key: 'status', customSlot: 'status' },
  { title: '邮箱', width: '120px', key: 'email' },
  { title: '性别', width: '80px', key: 'sex' },
  { title: '年龄', width: '80px', key: 'age' },
  { title: '城市', width: '120px', key: 'city' },
  { title: '签名', width: '260px', key: 'remark' },
  {
    title: '隐藏',
    width: '260px',
    key: 'hide',
    hide: true,
  },
  { title: '时间', width: '120px', key: 'joinTime' },
  {
    title: '操作',
    width: '150px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right',
    ignoreExport: true,
  },
]);

const change = (page) => {
  loading.value = true;
  setTimeout(() => {
    dataSource.value = loadDataSource(page.current, page.limit);
    loading.value = false;
  }, 1000);
};

const sortChange = (key, sort) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`);
};

const dataSource = ref([
  {
    id: '1',
    name: '张三1',
    email: 'test@qq.com',
    sex: '男',
    city: '浙江杭州',
    age: '18',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09',
    status: true,
    rest: '休息',
    defaultValue: '长白班两卡',
  },
  {
    id: '1',
    name: '张三1',
    email: 'test@qq.com',
    sex: '男',
    city: '浙江杭州',
    age: '18',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09',
    status: true,
    rest: '休息',
    defaultValue: '长白班两卡',
  },
  {
    id: '1',
    name: '张三1',
    email: 'test@qq.com',
    sex: '男',
    city: '浙江杭州',
    age: '18',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09',
    status: true,
    rest: '休息',
    defaultValue: '长白班两卡',
  },
  {
    id: '1',
    name: '张三1',
    email: 'test@qq.com',
    sex: '男',
    city: '浙江杭州',
    age: '18',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09',
    status: true,
    rest: '休息',
    defaultValue: '长白班两卡',
  },
  {
    id: '1',
    name: '张三1',
    email: 'test@qq.com',
    sex: '男',
    city: '浙江杭州',
    age: '18',
    remark: '花开堪折直须折,莫待无花空折枝.',
    joinTime: '2022-02-09',
    status: true,
    rest: '休息',
    defaultValue: '长白班两卡',
  },
]);

const changeStatus = (isChecked, row) => {
  dataSource.value.forEach((item) => {
    if (item.id === row.id) {
      layer.msg('Success', { icon: 1 }, () => {
        item.status = isChecked;
      });
    }
  });
};

const remove = () => {
  layer.msg(selectedKeys.value, { area: '50%' });
};

const loadDataSource = (page, pageSize) => {
  var response = [];
  var startIndex = (page - 1) * pageSize + 1;
  var endIndex = page * pageSize;
  for (var i = startIndex; i <= endIndex; i++) {
    response.push({
      id: `${i}`,
      age: '18',
      sex: '男',
      name: `张三${i}`,
      email: 'test@qq.com',
      remark: '花开堪折直须折,莫待无花空折枝.',
      joinTime: '2022-02-09',
      city: '浙江杭州',
      status: true,
    });
  }
  return response;
};

onMounted(() => {
  const { startTime, endTime } = queryParams.value;
  getDayRangeAll(startTime, endTime);
});
</script>

<style scoped>
.content {
  text-align: left;
  background: #fafafa;
  border-radius: 4px;
  padding: 20px;
}
</style>
